<html>
    <head>
        <title>盒模型</title>
    </head>
    <body>
        <script>
             /*
                二、盒模型


                         1、盒模型概念

                                        nvue的盒模型基于css盒模型，每个nvue元素都可以视作一个盒子。 我们一般子安讨论设计或布局时，会提到 "盒模型" 这个概念。

                                        盒模型描述了一个元素锁占用的空间。 每一个盒子有四条边界 ：  

                                                ①、外边距边界  margin edge

                                                ②、边框边界   border edge

                                                ③、内边距边界  padding edge

                                                ④、内容边界   context edge


                                                盒模型图片：  https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/flexBox.png

                                                nvue的盒模型的 box-sizing 默认为 border-box ，即盒子的宽高包含 内容、内边距、边框的宽度，不保哈外边距的宽度。

                                                在Android平台， nvue 只支持 overflow:hidden;

                                                在 ioss 上，nvue支持 overflow:hidden 和 overflow:visible ,默认是 overflow:visible


                         2、基本用法

                                    <template>
                                        <view>
                                            <image style="width: 400rpx; height: 200rpx; margin-left: 20rpx;" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png"></image>
                                        </view>
                                    </template>

                         3、内边距

                                   padding ： 内边距  ，内容和边框之间的距离，默认值0.与标准css类似， padding支持简写，也可以分解为4个：

                                      
                                        可选值                       描述

                                        padding                     上右下左，默认值为0

                                        padding-left                左内边距，默认值0

                                        padding-right               右侧内边距，默认0

                                        padding-top                 上内边距，默认0

                                        padding-bottom              下内边距，默认0

                        4、边框

                                   ①、border-style   设定边框样式，如果四个方向的边框样式不同，可分别设置


                                            可选值                        描述

                                            border-left-style            可选值为 solid， dashed，dotted，默认solid

                                            border-top-style             可选值为 solid， dashed，dotted，默认solid

                                            border-right-style           可选值为 solid， dashed，dotted，默认solid

                                            border-bottom-style          可选值为 solid， dashed，dotted，默认solid

                                   ②、border-width

                                            border-width: 设定边框宽度，非负值，默认0，如果四个方向的边框宽度不同，可分别设置：

                                            可选值                         描述

                                            border-width                  非负值，默认0

                                            border-left-width            非负值，默认0

                                            border-right-width             非负值，默认0

                                            border-top-width               非负值，默认0

                                            border-bottom-width            非负值，默认0


                                   ③、border-color

                                            border-color: 设置边框的颜色，默认值#000000 ，如果四个方向的边框颜色不同，可分别设置

                                            可选值                          描述

                                            border-color                    默认值 #000000
                                            border-left-color               默认值 #000000
                                            border-right-color              默认值 #000000
                                            border-top-color                默认值 #000000
                                            border-bottom-color             默认值 #000000

                                   ④、border-radius

                                            border-radius  : 设置边框的圆角，默认值0，如果四个方向的圆角弧度不同，可分别设置：

                                            可选值                           描述

                                            border-radius                   非负值，默认值0
                                            border-bottom-left-radius       非负值，默认值0
                                            border-bottom-right-radius       非负值，默认值0
                                            border-top-left-radius           非负值，默认值0
                                            border-top-right-radius          非负值，默认值0


                        5、外边距
                        
                                    margin ：外边距，元素和元素之间的空白距离，默认值0。 与标准css类似，margin支持简写，也可分解为四边：
                                    
                                             可选值                          描述

                                             margin                          上右下左，默认0
                                             margin-left                     左外边距，默认值0
                                             margin-right                    右外边距，默认值0，
                                             margin-top                      上外边距，默认值0
                                             margin-bottom                   下外边距，默认值0

                        
                        ★、Android兼容性

                                    尽管 overflow:hidden 在Android 上是默认行为，但只有下列条件都满足时，一个父view才会区剪切他的子view。

                                     ①、父 view 是 view、cell、refresh 或 loading

                                     ②、系统版本是Android 4.3 或更高。

                                     ③、系统版本不是 7.0

                                     ④、父 view 没有background-image 属性或系统版本是Android 5.0 或更高
            */

        </script>
    </body>
</html>